<template>
      <a-drawer
          :title="i18n('list.appHistory','审批历史')+'xxx'"
          placement="right"
          @close="onCheckHistory"
          width="400"
          class="bpm-check-history"
          :visible="historyShow"
          :z-index="20000"
      >
          <div class="drawer-body">
              <div style="padding-bottom: 10px" v-if="bpmTask!=null">
                  {{i18n('list.currNode','当前节点')}}：{{ bpmTask.name }}???
              </div>
              <div class="drawer-centent">
                  <div class="rxContent">
                      <a-steps v-model="checkHistorys.length-1" direction="vertical" size="small" :current="checkHistorys.length">
                          <a-step v-if="item.checkStatus!='UNHAND'" v-for="item in checkHistorys" :title="item.nodeName">
                             <span slot="description">
                                    <div class="description-head">
                                        <div class="description-head-portrait"><img src="@/image/portrait.png"></img></div>
                                        <div class="description-head-user"><rx-user-info :userId="item.handlerId"/></div>
                                        <div :class="[item.jumpType,'description-head-jumpTypeName']">{{item.jumpTypeName}}</div>
                                    </div>
                                    <div v-if="item.jumpType=='TRANSFER' && item.transferorName" class="description-common">
                                        {{ item.jumpTypeName }}{{i18n('list.given','给了')}}{{ item.transferorName }}
                                    </div>
                                    <div v-if="item.jumpType=='LINKUP'" class="description-common">
                                         <div>{{i18n('list.communTo','沟通给:')}}</div><div><rx-user-component :readonly="true" v-model="item.linkUpUsers"></rx-user-component></div>
                                    </div>
                                    <div class="description-common">
                                        <div>{{i18n('list.startTime','开始时间')}}:</div>
                                        <div>{{item.createTime}}</div>
                                    </div>
                                    <div class="description-common">
                                        <div>{{i18n('list.endTime','结束时间')}}:</div>
                                        <div>{{item.completeTime}}</div>
                                    </div>
                                    <div class="description-common">
                                        <div>{{i18n('list.approOpi','审批意见')}}:</div>
                                        <div v-if="item.remark!=''">{{item.remark}}</div>
                                        <div v-else>{{i18n('nothing','无')}}</div>
                                    </div>
                                    <div class="description-common" v-if="getRelInsts(item).length>0">
                                        <div>{{i18n('list.assoProcess','关联流程')}}:</div>
                                        <div style="flex: 1">
                                             <div style="width: 100%" v-for="flow in getRelInsts(item)">
                                             <a @click="showInst(flow.id,flow.name)">{{ flow.name }}</a>
                                             </div>
                                        </div>
                                    </div>
                                   <div v-if="item.opFiles && item.opFiles.length>0" class="description-common">{{i18n('list.attachList','附件列表')}}：</div>
                                   <div class="description-common-accessory" v-if="item.opFiles && item.opFiles.length>0" v-for="(subItem,index) in item.opFiles">
                                       <div class="iconBox description-iconBox" :class="rxClass(subItem)"></div>
                                       <div style="flex: 1">
                                           <div class="description-common-accessory-con">{{subItem.fileName}}</div>
                                           <div class="description-common-accessory-user">
                                               <div><my-icon type="iconuser-account-bussiness"></my-icon>{{item.handlerUserName }}</div>
                                               <div><my-icon type="icontime"></my-icon>{{ subItem.createTime }}</div>
                                           </div>
                                       </div>
                                       <div class="description-common-download">
                                            <my-icon type="iconcloud-download" @click="donwload(subItem)"></my-icon>
                                       </div>
                                   </div>
                              </span>
                          </a-step>
                          <a-step v-for="item in checkHistorysUnhand" :key="item.hisId" :title="item.nodeName">
                              <!--获取下一个流程节点-->
                                <span slot="description">
                                    <div class="description-head" >
                                        <div class="description-head-portrait">
                                            <img src="@/image/portrait.png"></img></div>
                                            <div class="description-head-user" v-for="obj_ in item.taskExecutors">
                                                {{obj_.name}}
                                            </div>
                                       <div class="description-unhand">{{i18n('list.nextNode','下一个节点')}}</div>
                                    </div>
                                    <div class="description-common">
                                        <div>{{i18n('list.startTime','开始时间')}}:</div>
                                        <div>{{item.createTime.split('~')[0]}}</div>
                                    </div>
                                    <div class="description-common">
                                        <div>{{i18n('list.endTime','结束时间')}}:</div>
                                        <div>{{item.createTime.split('~')[1]}}</div>
                                    </div>
                                    <div style="margin-top: 25px" v-if="item.child" v-for="obj in item.child">
                                        <div class="description-head"  style="margin-top: -17px">
                                            <div class="description-head-portrait"><img src="@/image/portrait.png"></img></div>
                                            <div class="description-head-user" v-for="obj_ in obj.taskExecutors">{{obj_.name}}</div>
                                        </div>
                                        <div class="description-common">
                                            <div>{{i18n('list.startTime','开始时间')}}:</div>
                                            <div>{{item.createTime.split('~')[0]}}</div>
                                        </div>
                                        <div class="description-common">
                                            <div>{{i18n('list.endTime','结束时间')}}:</div>
                                            <div>{{item.createTime.split('~')[1]}}</div>
                                        </div>
                                    </div>
                              </span>

                          </a-step>
                      </a-steps>
                  </div>
              </div>
          </div>
      </a-drawer>
</template>

<script>
import {RxUserComponent, Util,RxUserInfo,TokenUtil} from "@lowcode/jpaas-common-lib";
import BpmCheckHistoryApi from "@/api/bpm/core/bpmCheckHistory";
import FlowUtil from "../js/FlowUtil";


export default {
  name: "bpm-check-history",
  props: {
    instId: {type: String},
    bpmTask: {type: Object, required: false},
    historyShow: {type: Boolean, default: false},

    layerid: String,
    lydata: Object,
    destroy: {
      type: Function
    }
  },
  mixins:[FlowUtil],
  components: {
    RxUserComponent,
      RxUserInfo
  },
  data() {
    return {
      checkHistorys: [],
      extMapping: {
        ".doc": "wordBox",
        ".docx": "wordBox",
        ".xls": "excelBox",
        ".xlsx": "excelBox",
        ".txt": "txtBox",
        ".pdf": "pdfBox",
        ".rar": "rarBox",
        ".zip": "zipBox",
      },
        checkHistorysUnhand:[],
    }
  },
  methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"bpmInst",key);
      },
    rxClass(item) {//根据文件名  添加类名；
      var name = item.fileName;
      for (var key in this.extMapping) {
        if (name.indexOf(key) > -1) {
          return this.extMapping[key];
        }
      }
      return "attachBox";
    },
    getRelInsts(his) {
      if (!his.relInsts) {
        return [];
      }
      return JSON.parse(his.relInsts);
    },
    donwload(file) {//下载附件
      var accessToken = TokenUtil.getToken();
      const url = '/api/api-system/system/core/sysFile/download/' + file.fileId + '?accessToken=' + accessToken;
      window.open(url);
    },
    onCheckHistory() {
      this.$emit('update:historyShow', false)
    },
    loadCheckHistory() {
      BpmCheckHistoryApi.getCheckHistorys(this.instId).then(his => {
        this.checkHistorys = his;
        //判断下一个节点构造数据
          this.loadUnhand()
      });
    },
      loadUnhand(){
        var listData = [];
            this.checkHistorys = this.checkHistorys.filter(res=>{
            if(res.checkStatus!="UNHAND"){
                return true
            }else {
                listData.push(res)
            }
        })

          let newArr = []
          let teamArr = []
          for (let i = 0; i < listData.length; i++) {
              if (!teamArr.includes(listData[i]['actTaskId'])) {
                  newArr.push(listData[i])
                  teamArr.push(listData[i]['actTaskId'])
              } else {
                  for (let n = 0; n < newArr.length; n++) {
                      if (newArr[n]['actTaskId'] == listData[i]['actTaskId']) {
                          if(newArr[n].child){
                              newArr[n].child.push(listData[i])
                          }else {
                              var a= [];
                              a.push(listData[i])
                              this.$set(newArr[n],'child',a)
                          }
                          break
                      }
                  }
              }
          }
          this.checkHistorysUnhand = newArr;
      },
    showInst(id, name) {
        var self=this;
        this.encryptInstIds(id,true,function(resultList){
            let grant=resultList[0].grant;
            if(!grant){
                return;
            }
            let encInstId=resultList[0].encInstId;
            let obj=self.$router.resolve({
                name:'openDoc',
                params:{instId:encInstId.instId},
                query:{appId:encInstId.appId}
            });
            window.open(obj.href+'?action=detail',"_blank" );
        })
    }
  },
  watch: {
    historyShow: function (val) {
      if (val) {
        this.loadCheckHistory();
      }
    }
  }
}
</script>

<style lang="less">
.description-unhand{
    padding: 0 6px;
    min-width: 70px;
    height: 22px;
    border-radius: 2px;
    border: solid 1px #6683ef;
    font-size: 12px;
    color: #6683ef;
    text-align: center;
    line-height: 22px;
}
.description-common-accessory{
    display: flex;
    align-content: center;
    border-bottom:1px dashed #d9d9d9;
    padding-bottom:10px ;
    margin-top: 5px;
    .description-common-download{
        margin-left: 20px;
        color: #46494d;
        font-size: 20px;
    }
    .description-iconBox{
        margin-right: 9px;
        margin-top: 5px;
    }
    .description-common-accessory-con{
        font-size: 12px;
        color: #303030;
    }
    .description-common-accessory-user{
        display: flex;
        color: #303030;
        font-size: 12px;
        div:nth-child(2){
           flex: 1;
            text-align: right;
        }
    }
}
.description-common{
    display: flex;
    font-size: 12px;
    color: #303030;
    line-height: 20px;
    div:nth-child(1){
        margin-right: 5px;
    }
    div:nth-child(2){
        flex: 1;
    }
}
.bpm-check-history{
    .ant-steps-vertical.ant-steps-small .ant-steps-item-container .ant-steps-item-tail{
        z-index: -1;
    }
    .ant-drawer-body{
        padding: 10px 20px!important;
    }
}
.description-head{
    display: flex;
    align-content: center;
    margin-bottom: 11px;
    .description-head-portrait{
        width: 20px;
        height: 20px;
        line-height: 20px;
        margin-right: 3px;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }
    .description-head-user{
        font-size: 12px;
        color: #46494d;
        margin-top: 2px;
        flex: 1;
    }
    .description-head-jumpTypeName{
        flex:1;
        text-align: center;
        font-size: 12px;
        margin-top: 2px;
    }
}
.opDesp {
  font-size: 12px;
  line-height: 32px;
  color: blue;
  width: 100%;
}

.time {
  font-size: 10px;
  color: darkgray;

  width: 100%;
  line-height: 26px;
}

.AGREE {
  font-weight: bold;
  color: green;
}

.BACK, .BACK_SPEC, .BACK_TO_STARTOR {
  font-weight: bold;
  color: red;
}
.SKIP{
    color: red;
}
</style>
